<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue组件使用细节</title>
    <script src="../../vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li is="item"></li>
            <li is="item"></li>
            <li is="item"></li>
        </ul>
    </div>

    <script>
        Vue.component('item', {
            data() { // 1. 如果组件中想要将trmplate和要展示数据分离,那么需要使用data方法,不能是data对象了,只有vue实例中才能使用data对象
                return { // 2. 然后这个对象还有一个返回对象,返回对象里面的属性才是要展示的内容. 这么做的原因是因为有可能这个内容被调用的不知一次而且不一定是一样的值
                    content: 'haha'
                }
            },
            template: '<li>{{content}}</li>'
        });
        const app = new Vue({
            el: '#app',

        })
    </script>
</body>

</html>